import { IElementUtils } from '@/utils/interface/IElementUtils';
import { ElMessage, ElMessageBox, MessageBoxData } from 'element-plus';
import { h } from 'vue';
import { WarningFilled } from '@element-plus/icons-vue';

class ElementUtils implements IElementUtils {
  message(
    msg: string,
    type: 'success' | 'error' | 'info' | 'warning' = 'success',
    showClose: boolean = true,
    options = {}
  ) {
    ElMessage({
      type: type,
      showClose: showClose,
      message: msg,
      ...options,
    });
  }

  messageBoxV1(
    msg1: string,
    msg2: string,
    okHandle: (
      done: Function,
      instance: { confirmButtonLoading: boolean; confirmButtonText?: string }
    ) => void,
    width: string = ''
  ) {
    ElMessageBox({
      title: '操作确认',
      message: h('div', null, [
        h(
          'div',
          {
            style: 'padding:20px',
          },
          [
            h(
              'div',
              {
                style:
                  'display: flex;align-items: center;grid-column-gap: 12px;',
              },
              [
                h('div', [
                  h(
                    'div',
                    {
                      style: 'display: flex;align-items: center;',
                    },
                    [
                      h('el-icon', [
                        h(WarningFilled, {
                          style: {
                            color: '#E6A23C',
                            width: '1.6em',
                            height: '1.6em',
                          },
                        }),
                      ]),
                      h(
                        'div',
                        { style: 'font-size:16px;margin-left:6px' },
                        `${msg1}`
                      ),
                    ]
                  ),
                  h(
                    'div',
                    {
                      style:
                        'font-size:14px;color:#999;margin-top:6px;margin-left:32px',
                    },
                    `${msg2}`
                  ),
                ]),
              ]
            ),
          ]
        ),
      ]),
      customStyle: {
        'min-width': width,
      },
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true;
          // instance.confirmButtonText = 'Loading...';
          okHandle && okHandle(done, instance);
        } else {
          done();
        }
      },
    }) // @ts-ignore
      .then((action: Object): void => {})
      // @ts-ignore
      .catch((err: Error) => {});
  }

  messageBox(
    msg: string,
    okHandle: (
      done: Function,
      instance: { confirmButtonLoading: boolean; confirmButtonText?: string }
    ) => void
  ) {
    ElMessageBox({
      title: '操作确认',
      message: h('div', null, [
        h(
          'div',
          {
            style: 'padding-left:20px;margin-top: 20px;',
          },
          [
            h(
              'div',
              {
                style:
                  'display: flex;align-items: center;grid-column-gap: 12px;',
              },
              [
                h('div', [
                  h(
                    'div',
                    {
                      style: 'display: flex;align-items: center;',
                    },
                    [
                      h('el-icon', [
                        h(WarningFilled, {
                          style: {
                            color: '#E6A23C',
                            width: '2em',
                            height: '2em',
                          },
                        }),
                      ]),
                      h(
                        'div',
                        { style: 'font-size:16px;margin-left:6px' },
                        `${msg}`
                      ),
                    ]
                  ),
                ]),
              ]
            ),
          ]
        ),
      ]),
      showCancelButton: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true;
          // instance.confirmButtonText = 'Loading...';
          okHandle(done, instance);
        } else {
          done();
        }
      },
    })
      // @ts-ignore
      .then((action: MessageBoxData) => {})
      // @ts-ignore
      .catch((err: Error) => {});
  }
}

const elementUtils = new ElementUtils();
export default elementUtils;
